<template>
    <div class="smtp-settings-container">
      <el-card class="settings-card" shadow="hover">
        <h2 class="settings-title">SMTP 配置信息</h2>
        <el-descriptions title="SMTP 配置详情" :column="1" border>
          <el-descriptions-item label="SMTP服务器">
            {{ smtpConfig.server || "未配置" }}
          </el-descriptions-item>
          <el-descriptions-item label="端口">
            {{ smtpConfig.port || "未配置" }}
          </el-descriptions-item>
          <el-descriptions-item label="发件人邮箱">
            {{ smtpConfig.email || "未配置" }}
          </el-descriptions-item>
          <el-descriptions-item label="启用SSL">
            <el-tag :type="smtpConfig.ssl ? 'success' : 'info'">
              {{ smtpConfig.ssl ? "已启用" : "未启用" }}
            </el-tag>
          </el-descriptions-item>
        </el-descriptions>
        <div class="action-buttons">
          <el-button v-if="!showSmtpSetting" type="primary" @click="updateSmtpSetting">更新SMTP配置</el-button>
        </div>
        <SmtpSetting v-if="showSmtpSetting" @updateShowSmtpSetting="handleUpdateShowSmtpSetting"></SmtpSetting>
      </el-card>
    </div>
  </template>
  
  <script setup>
  import { ref, onMounted } from "vue";
  import { ElMessage } from "element-plus";
  import { getSmtpSetting } from "@/api/email";
  import SmtpSetting from "@/components/SmtpSetting.vue";

  const showSmtpSetting = ref(false);
    
  const updateSmtpSetting = () => {
    showSmtpSetting.value = true;
  };
  
  // 初始化配置数据
  const smtpConfig = ref({
    server: "smtp.example.com",
    port: "25",
    email: "example@example.com",
    ssl: false,
  });
  
  // 获取 SMTP 配置
  const fetchSettings = async () => {
    try {
    getSmtpSetting({}).then(res => {
      smtpConfig.value.server = res.host
      smtpConfig.value.port = res.port
      smtpConfig.value.email = res.username
      if (res.encryption ==="ssl") {
        smtpConfig.value.ssl = true
      } else {
        smtpConfig.value.ssl = false
      }
    })
      ElMessage.success("SMTP 配置信息已加载！");
    } catch (error) {
      console.error("获取SMTP配置失败:", error);
      ElMessage.error("获取SMTP配置失败！");
    }
  };

  const handleUpdateShowSmtpSetting = () => {
    showSmtpSetting.value = !showSmtpSetting.value
      getSmtpSetting({}).then(res => {
      smtpConfig.value.server = res.host
      smtpConfig.value.port = res.port
      smtpConfig.value.email = res.username
      if (res.encryption ==="ssl") {
        smtpConfig.value.ssl = true
      } else {
        smtpConfig.value.ssl = false
      }
    })
}
  
  // 页面加载时获取配置
  onMounted(() => {
    fetchSettings();
  });
  </script>
  
  <style scoped lang="scss">
  .smtp-settings-container {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background: $background-color;
  }
  .settings-card {
    width: 400px;
    padding: 20px;
  }
  .settings-title {
    text-align: center;
    margin-bottom: 20px;
    font-size: 24px;
    color: #333;
  }
  .action-buttons {
    text-align: center;
    margin-top: 20px;
  }
  </style>
  